<template>
  <div class="search_popus">
    <form action="/">
      <van-search
        v-model="value"
        show-action
        :placeholder="defaultKeyword.keyword"
        @search="onSearch"
        @cancel="onCancel"
        @input="onInput"
      />
    </form>
    <history 
    :hotKeywordList='hotKeywordList'
    :historyKeywordList='historyKeywordList'
    v-if="backBool==1"
    />
    <searchpop :searchpop='searchpop' v-if="backBool==2" />
  </div>
</template>

<script>
import { Toast } from "vant";
import history from "@/components/history.vue";
import {GetSerchData,GetSerchHelper} from '@/request/api'
import searchpop from "@/components/searchpop.vue"


export default {
  

  components: {
    history,
    searchpop
  },

  directives: {},

  data() {
    return {
      historyKeywordList: "",
      hotKeywordList: [],
      defaultKeyword: "",
      value:'',
      backBool:1,
      searchpop:''
    };
  },

  mounted() {},

  methods: {
    onSearch(val) {
      Toast(val);
    },
    onCancel() {
      this.$router.go(-1);
    },
    onInput(value){
       this.backBool=2
      GetSerchHelper({keyword:value}).then((res) => {
      this.searchpop=res
    });
    }
  },
  created() {
    GetSerchData().then((res) => {
      // console.log(res);
      this.historyKeywordList = res.historyKeywordList;
      this.hotKeywordList = res.hotKeywordList;
      this.defaultKeyword = res.defaultKeyword;
    });
    
  },
};
</script>

<style lang="less">
.search_popus {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  background-color: #efefef;
}
</style>